<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>我的水卡</title>
    <style>
        body{
            margin: 0px;
        }
        #img1{
            width: 375px;
            height: 900px;
        }
        #img2{
            width: 250px;
            height: 100%;
        }
        #return{
            width: 21px;
            height: 40px;
        }
        .news ul {
            position: absolute;
            top: 330px;
            left: -5px;
            padding: 0;
            line-height:3px;
            width: 375px;
        }
        .news li {
            position: relative;
            overflow: hidden;
            padding: 5px;
            border-bottom: 1px solid lightgray;
        }
        .news li span {
            display: none;
        }
        .news li:hover span {
            display: inline;
            position: absolute;
            top: 0;
            right: 2px;
            padding: 0 5px;
            border-radius: 10px;
            font-size: 12px;
            background: #ececec;
        }
        .news .news_content {
            width: 60%;
            height: 85%;
            margin: 2.5%;
            float: right;
        }
        .news .news_content p {
            line-height: 27px;
            margin-top: 10px;
        }
        .news img {
            float: left;
            width: 25%;
            position: relative;
            border-radius: 50%;
        }
        #submit{
            width: 75px;
            height: 30px;
            border-radius: 5px;
            background-color: #7e86ec;
            color: white;
            position: absolute;
            top: 41px;
            left: 285px;
            border: none;
            /*outline: none;*/
        }
    </style>
</head>
<body>
<header>
    <div style="position:relative;" id="login">
        <img id="img1" src="./img/login/img1.png" width="500" height="500" />
        <div style="position:absolute; left:60px; top:-100px;">
            <img id="img2"  src="./img/login/img2.png"/>
        </div>
        <div style="position:absolute; left:10px; top:8px;">
            <img id="return" src="./img/nearby/return.png" onclick="history.go(-1)">
        </div>
    </div>
</header>
<div id="content">
    <div class="news">
        <ul id="news">
        </ul>
    </div>
</div>
<script src="./api/app.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/1.12.4/jquery.js"></script>
<script>
    function loadData(type) {
        $.ajax({
            url:url+'api/card.php',
            type:'GET',
            data:{
                type:type
            },
            dataType:'json',
            success:function (res) {

                console.log(res)
                if(res.code==200){
                    var data=res.data
                    var ls = document.getElementById('news')
                    var contents = '';
                    for (var j = 0; j < data.length; j ++) {
                        contents +=
                            '           <li >\n' +
                            '                <img src="'+url+'uploads/' + data[j].img + '">\n' +
                            '                <div class="news_content">\n' +
                            '                    <p>' + data[j].title + '</p>\n' +
                            '                    <h4>' + data[j].card_id + '</h4>\n' +
                            '                </div>\n' +
                            '                <input id="submit"    name="submit" type="submit" value="'+data[j].state+'" >' +
                            '            </li>\n'
                    }
                    ls.innerHTML = contents;

                }
            },
            error:function (res) {

                console.log(res)

            }
        })




    }
    //请完成代码
    // i = 0; //指示器
    // var swipers = document.getElementsByClassName('swiper-slide');
    // inter1 = setInterval(function () {
    //     changeBanner(1)
    // }, 2000)
    //
    // function changeBanner(dir) {
    //     //1. 全部隐藏
    //     for (var j = 0; j < 3; j ++) {
    //         swipers[j].style.display = 'none'
    //     }
    //     //2. 显示相应的
    //     if (dir == 1) {
    //         i ++;
    //         if (i >= 3) {
    //             i = 0;
    //         }
    //     } else {
    //         i --;
    //         if (i < 0) {
    //             i = 2
    //         }
    //     }
    //
    //     swipers[i].style.display = 'block'
    // }
    window.onload = function () {
        loadData(-1);
        // init();
    }
</script>
</body>
</html>